Layui table表格部分数据无法渲染出来

2023-08-19 03:35| 来源: 网络整理| 查看: 265

1、项目场景

在日常的开发中，由于项目需要，所以会经常使用Layui table来进行展示数据。

2、问题描述

从下图中可以看到，后台的api接口确实是返回了两条数据，Layui table表格中却只渲染出一条数据？简直头大。

3、原因分析

通过查看数据库，对比了数据源的所有字段，经过排查发现了是因为数据源中有一个length字段，属性length等于0的数据都没有显示到表格中。

4、解决方案

处理后台api接口返回的数据，删除数据源中的length属性。

table.render({ elem: '#mainTable', url: imatgeneralGetByPageUrl, height: 'full-' + tableHeight, method: 'post', contentType: 'application/json', //where: { matgroup: matgroup }, where: GetTable(), parseData: function (res) { //数据源中有一个length字段时，length: 0部分数据未显示出来，删除数据源中的length属性 let newData = JSON.parse(JSON.stringify(res.rows)) newData.map(function (e) { delete e.length }) return { "code": 0, "msg": res.message, "count": res.total, "data": newData } }, cols: [[ { field: 'matcode', minWidth: 200, title: '型号代码', sort: true }, { field: 'matname', minWidth: 200, title: '型号名称' }, { field: 'salesuom', minWidth: 200, title: '型号单位' }, { field: 'unitwght', minWidth: 200, title: '型号单重' }, ]], limits: [10, 15, 20, 25, 50, 100], limit: 25, page: true, skin: 'line', }); function GetTable() { return { "matgroup": matgroup }; };

5、处理结果

经过处理，现在所有的数据都可以渲染出来了。

【本文地址】

公司简介

联系我们